﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yaDRGoon5YoRzAAwH781yUgn"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
    <script src="JS/jquery-2.1.3.min.js"></script>
    <title>显示信号灯Demo</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            text-align: center;
            margin: 0 auto;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 1200px;
            height: 800px;
            border: 1px solid;
            text-align: center;
            padding-top: 20px;
            margin: 0 auto;
            margin-top: 20px;
            font-family: "微软雅黑";
        }

        #r-result {
            width: 1200px;
            height: 80px;
            margin: 0 auto;
            margin-top: 10px;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <div id="allmap">
    </div>
    <div id="r-result">
        <input type="button" onclick="displayGroundOverlay();" value="显示" />
        <input type="button" onclick="removeGroundOverlay();" value="清除" />
    </div>
</body>
</html>
<script type="text/javascript">

    map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.417854, 39.921988), 15);
    map.enableContinuousZoom(true);    //启用地图惯性拖拽，默认禁用
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 左上角，添加比例尺
    map.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件
    map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));          //2D图，卫星图

    /*-------------------------------------自定义鼠标测距工具----------------------------------------------*/
    // 定义一个控件类,即function
    function ZoomControl() {
        // 默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
        this.defaultOffset = new BMap.Size(10, 15);
    }

    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();

    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function (map) {
        // 创建一个DOM元素
        var div = document.createElement("div");
        // 添加文字说明
        div.appendChild(document.createTextNode("鼠标测距"));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid gray";
        div.style.backgroundColor = "white";
        // 绑定事件,开启数据测距
        var myDis = new BMapLib.DistanceTool(map);
        div.onclick = function (e) {
            myDis.open();  //开启鼠标测距
            //myDis.close();  //关闭鼠标测距大
        }
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    }
    // 创建控件
    var myZoomCtrl = new ZoomControl();
    // 添加到地图当中
    map.addControl(myZoomCtrl);
    /*-------------------------------------自定义鼠标测距工具----------------------------------------------*/


    function displayGroundOverlay() {

        map.clearOverlays();///清除覆盖物

        var ptArr = new Array();
        var markers = [];

        var opts = {
            width: 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title: "信息窗口", // 信息窗口标题
            enableMessage: true//设置允许信息窗发送短息
        };
        var size = new BMap.Size(58, 80);///图形大小

        $.ajax({
            type: "POST",
            url: "GetSignal.aspx",
            data: { Dotype: "GetSignalLamp" },
            success: function (result) {
                if (result == 0) {
                    alert("未查询到数据！");
                }
                else {
                    var singleInfo = result.split("|");
                    for (var i = 0; i < singleInfo.length; i++) {
                        var info = singleInfo[i].split(",");
                        var pt = new BMap.Point(info[0], info[1]);

                        ptArr[i] = pt;
                        var myIcon = new BMap.Icon(info[2], size);

                        var marker = new BMap.Marker(pt, { icon: myIcon });  // 创建标注
                        var content = info[3];
                        map.addOverlay(marker);               // 将标注添加到地图中
                        addClickHandler(content, marker);
                        markers.push(marker);////把覆盖物加到聚合中
                    }
                    function addClickHandler(content, marker) {
                        marker.addEventListener("click", function (e) {
                            openInfo(content, e)
                        }
                        );
                    }
                    function openInfo(content, e) {
                        var p = e.target;
                        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
                        map.openInfoWindow(infoWindow, point); //开启信息窗口                       
                    }
                    var polyline = new BMap.Polyline(ptArr, { strokeColor: "red", strokeWeight: 6, strokeOpacity: 1 });  //定义折线
                    map.addOverlay(polyline);     //添加折线到地图上
                    var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });///点聚合
                }
            }
        });
    }

    function removeGroundOverlay() {
        map.clearOverlays();
    }

</script>

